<template>

  <div
    :class="obj"
    :style="{width:widths}"
    class="query-select"
    @click="selectList">
    <input v-model="selectName" readonly="readonly">
    <div class="down"/>
    <div
      v-show="selectShow"
      :style="selectStyle"
      class="select">
      <div
        v-for="(items,selectIndex) in selectContent"
        :key="(items,selectIndex)"
        :value="items.value"
        class="option"
        @click="optionSelect(items,selectIndex)">{{ items.name }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    selectContent: {
      type: Array,
      default: function () {
        return []
      }
    },
    defaultValue: {
      type: Number,
      default: 0
    },
    obj: {
      type: String,
      default: ''
    },
    widths: {
      type: String,
      default: ''
    },
    selectStyle: {
      type: Object,
      default: function () {
        return {left: 0, width: '100%'}
      }
    }
  },
  data () {
    return {
      selectValue: '',
      selectName: '',
      selectShow: false,
      index: 0
    }
  },
  mounted () {
    this.defaultSelect()
  },
  created () {
    // 点击其他不在的区域触发事件
    document.addEventListener('click', this.clickSelect)
  },
  destroyed () {
    document.removeEventListener('click', this.clickSelect)
  },
  methods: {
    clickSelect (e) {
      if (!this.$el.contains(e.target)) {
        this.selectShow = false
      }
    },
    selectList () {
      this.selectShow = !this.selectShow
    },
    optionSelect (items, itemsIndex, ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      this.selectShow = false
      this.selectName = items.name
      this.selectValue = items.value
      if (this.index !== itemsIndex) {
        this.index = itemsIndex
        this.$emit('selectData', this.selectValue, this.selectName)
      }
    },
    defaultSelect () {
      this.selectName = this.selectContent[this.defaultValue].name
      this.index = 0
    }
  }
}
</script>
<style lang="scss" scoped>
$f_color : #ffffff;
$border_color : #79C4EE;
$bg_color: #3C8ACC;
$f_size:.26rem;
.query-select{
    min-width: .5rem;
    text-align: left;
    position: relative;
    display: inline-block;
    border: .02rem solid $border_color;
    padding:0 .45rem 0 .1rem;
    height:0.5rem;
    line-height: .5rem;
    font-size: $f_size;
    background: $bg_color;
    input{
        width:100%;
        height:.4rem;
        line-height: .4rem;
        border: none;
        background: $bg_color;
        color:$f_color;
        font-size: $f_size;
    }
    .select{
        position: absolute;
        top:.53rem;
        left:.01rem;
        z-index: 500;
        color:$f_color;
        font-size: $f_size;
        background:$bg_color;
        border: .02rem solid $border_color;
        width: 7rem;
        max-height: 5rem;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: .2rem;
        .option{
            border: none;
            background:$bg_color;
            color: $f_color;
            font-size: $f_size;
            padding-left:.2rem;
            &.active{
                background: $bg_color;
            }
        }
    }
    .down{
      position: absolute;
      display: block;
      right:0.08rem;
      top:45%;
      z-index: 100;
      border-top:.1rem solid $f_color;
      border-right:.1rem solid transparent;
      border-left:.1rem solid transparent;
      border-bottom:.1rem solid transparent;
    }
}
</style>
